<template>
  <view class="page page-login">
    <!-- 		<u-navbar title="登录" bgColor="transparent" :autoBack="true">
		</u-navbar> -->
    <image src="/static/image/l-bg1.png" mode="aspectFill" class="l-bg"></image>
    <u-navbar
      :placeholder="true"
      bgColor="transparent"
      title=" "
      leftIcon=" "
      :autoBack="true"
      :safeAreaInsetTop="true"></u-navbar>
    <view class="page-inner">
      <view class="logo-box">
        <image
          src="@/static/image/logob.png"
          mode="aspectFit"
          class="login-logo"></image>
      </view>
      <!-- 		<view class="text-box">
				<view class="text-1">
					小程序名称
				</view>
			</view> -->
      <view class="action-box" @click="goLogin">
        <!-- <view class="btn-box"> -->
        账号密码登录
        <!-- <button
            v-if="!has_phone"
            class="btn-bind-phone flex-center"
            @click="openTerms()">
            <text>授权手机号登录</text>
          </button>
          <button
            v-else
            class="btn-bind-phone flex-center"
            @click="doFastLogin()">
            <text>快速登录</text>
          </button> -->
        <!-- </view> -->
      </view>
      <view class="footer-terms flex-center">
        <view class="terms-box flex-center" @click="is_agree = !is_agree">
          <image
            class="image-check"
            v-if="!is_agree"
            src="@/static/common/radio0.png"
            mode=""></image>
          <image
            class="image-check"
            v-if="is_agree"
            src="@/static/image/check.png"
            mode=""></image>
          <text>登录即同意</text>
        </view>
        <text @click="toTerms()" class="terms-text">《E校通用户隐私协议》</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      is_agree: false,
      has_phone: false,
    };
  },
  watch: {},
  onLoad(option) {},
  onShow() {},
  methods: {
    goLogin() {
      this.toRoute("/login-account");
    },
    confirmTerms(option) {
      this.is_agree = true;
      if (option.type == "同意协议") {
        if (option.data && option.data.username) {
          this.has_phone = true;
        }
      }
    },

    changePhoneStatus(status) {
      this.has_phone = status;
    },

    toTerms() {
      this.toRoute("/login-terms");
    },
    doFastLogin() {
      if (this.is_agree) {
        this.toBack();
      } else {
        this.openTerms();
      }
    },
  },
};
</script>

<style lang="scss">
page {
  height: 100%;
}
.page-login {
  height: 100%;
  width: 100%;
  position: relative;
  .l-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
}
.page-inner {
  position: relative;
  z-index: 10;
  padding-top: 274rpx;
}

.logo-box {
  text-align: center;

  .login-logo {
    width: 260rpx;
    height: 260rpx;
    display: block;
    margin: 0 auto;
  }
}

.text-box {
  margin-top: 66rpx;
  text-align: center;

  .text-1 {
    text-align: center;
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 40rpx;
    color: #98b847;
  }

  .text-2 {
    margin-top: 10rpx;
    text-align: center;
    font-size: 20rpx;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }
}

.action-box {
  margin: 362rpx auto 0;

  width: 622rpx;
  height: 88rpx;
  background: #f49c0d;
  text-align: center;
  line-height: 88upx;
  font-weight: bold;
  font-size: 28rpx;
  color: #ffffff;
  border-radius: 44rpx 44rpx 44rpx 44rpx;
  .btn-box {
    width: 100%;
    position: relative;

    .btn-mask {
      position: absolute;
      z-index: 10;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
    }
  }

  .btn-bind-phone {
    text-align: center;
    width: 100%;
    height: 88rpx;
    background: #cb0011;
    border-radius: 44rpx 44rpx 44rpx 44rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #ffffff;
  }
}

.footer-terms {
  margin-top: 342upx;

  .terms-box {
    font-weight: 500;
    font-size: 24rpx;
    color: #000000;
    .image-check {
      margin-right: 10rpx;
      width: 24rpx;
      height: 24rpx;
    }
  }

  .terms-text {
    color: #f49c0d;
  }
}
</style>
